<!DOCTYPE html>
<html lang="en"  xmlns:shiro="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - FooTable</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico">
    <link th:href="@{/asserts/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/asserts/css/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/asserts/css/plugins/footable/footable.core.css}" rel="stylesheet">

    <link th:href="@{/asserts/css/animate.min.css}" rel="stylesheet">
    <link th:href="@{/asserts/css/style.min.css}" rel="stylesheet">
    <link th:href="@{/asserts/css/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/asserts/css/bootstrap-tree-view-badge.css}">

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">


    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>组织管理</h5>
                </div>
                <div class="ibox-content table-responsive">
                    <div class="col-sm-4 " id="tree">
                    </div>

                    <div class="col-sm-8 orgDoTable"  style="display:none;">
                        <form th:method="post" id="orgForm">
                            <!--发送put请求修改数据
                                1.spring中配置HiddenHttpMethodFilter;(SpringBoot 自动配置好)
                                2.页面创建一个post表单
                                3.创建一个input项，name="_method"
                            -->


                            <input class="form-control" id="uuid" name="uuid" placeholder="uuid" type="hidden">

                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label" for="name">[[#{message.org.name}]]</label>
                                <div class="col-sm-10">
                                    <input class="form-control" id="name" name="name" placeholder="name" type="text">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label" for="code">[[#{message.org.code}]]</label>
                                <div class="col-sm-10">
                                    <input class="form-control" id="code" name="code" placeholder="code" type="text">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label" for="address">[[#{message.org.address}]]</label>
                                <div class="col-sm-10">
                                    <input class="form-control" id="address" name="address" placeholder="address" type="text">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label" for="phone">[[#{message.org.phone}]]</label>
                                <div class="col-sm-10">
                                    <input class="form-control" id="phone" name="phone" placeholder="phone" type="text">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label" for="email">[[#{message.org.email}]]</label>
                                <div class="col-sm-10">
                                    <input class="form-control" id="email" name="email" placeholder="email" type="text">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label" for="fax">[[#{message.org.fax}]]</label>
                                <div class="col-sm-10">
                                    <input class="form-control" id="fax" name="fax" placeholder="fax" type="text">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label" for="storageOrg">产权组织树</label>
                                <div class="col-sm-10">
                                <select class="form-control m-b " id="storageOrg" name="storageOrg">
                                    <option th:each="un : ${storageOrg}" th:value="${un.getKey()}" th:text="${un.getValue()}"></option>
                                </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label" for="isRentOrg">是否租赁公司</label>
                                <div class="col-sm-10">
                                <select class="form-control m-b " id="isRentOrg" name="isRentOrg">
                                    <option th:each="un : ${storageOrg}" th:value="${un.getKey()}" th:text="${un.getValue()}"></option>
                                </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label" for="isTwoLevel">是否二级单位</label>
                                <div class="col-sm-10">
                                <select class="form-control m-b " id="isTwoLevel" name="isTwoLevel">
                                    <option th:each="un : ${storageOrg}" th:value="${un.getKey()}" th:text="${un.getValue()}"></option>
                                </select>
                                </div>
                            </div>

                            <div class="hr-line-dashed"></div>
                            <div class="form-group row">
                                <div class="col-sm-4 col-sm-offset-2">
                                    <button class="btn btn-primary btn-sm badge-pill" th:text="#{message.save.add}" type="button" onClick="addOrg();">[[#{message.save.add}]]</button>
                                    <button class="btn btn-secondary btn-sm badge-pill" th:text="#{message.save.edit}" type="button" onClick="editOrg();">[[#{message.save.edit}]]</button>
                                    <button class="btn btn-danger btn-sm badge-pill" th:text="#{message.delete}" type="button" onClick="deleteOrg();">[[#{message.delete}]]</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:replace="common/pop/confirm::showConfirm"></div>

<script th:src="@{/asserts/js/jquery.min.js}"></script>
<script th:src="@{/asserts/js/bootstrap.min.js}"></script>
<script th:src="@{/asserts/js/plugins/footable/footable.all.min.js}"></script>
<script th:src="@{/asserts/js/content.min.js}"></script>
<script th:src="@{/asserts/js/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/asserts/js/bootstrap-table/locale/bootstrap-table-zh-CN.js}"></script>
<script th:src="@{/asserts/js/tree-view/js/bootstrap-treeview-cl.js?v=1.1}" type="text/javascript"></script>

<script th:replace="common/myJs::myCommonJs"></script>
<script>
    $(function () {
        getTree();
    });

    function getTree() {
        let url = '[[@{/sysorg/list}]]'
        $.ajax({
            url: url,
            type: "get",
            success: function (data) {
                data = eval('(' + data + ')');
                resolve(data)
            },
            error: function (data) {

            }
        });
    }

    function resolve(data) {
        $('#tree').treeview({
            collapseIcon: "fa fa-minus",
            nodeIcon: "fa fa-building-o",
            emptyIcon: "",
            showIcon: true,
            levels: 2,
            expandIcon: "fa fa-plus",
            data: data,
            showTags: true,
            onNodeSelected: function (event, data) {
                $(".orgDoTable").show();
                $('#code').val(data.code);
                $('#name').val(data.name);
                $('#phone').val(data.phone);
                $('#email').val(data.email);
                $('#fax').val(data.fax);
                $('#address').val(data.address);
                $('#uuid').val(data.uuid);
                $('#storageOrg').val(data.storageOrg);
                $('#isRentOrg').val(data.isRentOrg);
                $('#isTwoLevel').val(data.isTwoLevel);
            }, onNodeUnselected: function (event, data) {
                $(".orgDoTable").hide();
                $('.form-control').val('');
            }, onNodeExpanded: function (event, data) {
                let url = '[[@{/sysorg/getByParent}]]'
                let id = data['nodeId'];		//获取节点的nodeid （nodeid是treeview自动生成的，每个节点不同）
                $.ajax({					//异步加载当前节点的子节点数据
                    type: "post",
                    url: url,
                    async: false,
                    dataType: 'json',
                    data: 'parentId=' + data['uuid'],
                    success: function (result) {
                        let arr = [];
                        $("#tree").treeview("deleteChildrenNode", id);
                        for (var i = 0; i < result.length; i++) {
                            //result[i]的格式如下图
                            arr.push(result[i]);
                        }
                        $("#tree").treeview("addNode", [id, {node: arr, silent: true}]);
                    }
                })
            }
        });
    }


    function allowed(){
        if(!$('#uuid').val()){
            layer.alert('请先选择操作的部门', {icon: 5});
            return false;
        }
        return true
    }

    function addOrg(){
        if(!allowed()){
            return ;
        }
        let action = '[[@{/sysorg/add}]]'
        submitForm(action)
    }

    function editOrg(){
        if(!allowed()){
            return ;
        }
        let action = '[[@{/sysorg/edit}]]'
        submitForm(action)
    }

    function deleteOrg(){
        if(!allowed()){
            return ;
        }
        let action = '[[@{/sysorg/del}]]'
        $('#confirmModal').modal("show");
        $("#confirmDelete").click(function () {
            submitForm(action)
            $('#confirmModal').modal("hide");
        });
    }

    function submitForm(action){
        $("#orgForm").removeAttr('action');
        $("#orgForm").attr('action',action);
        $("#orgForm").submit();
    }
</script>
</body>

</html>